<template>
  <div class="page-head" :class="{'border': isBorder}">
      <div class="head-left">
          <div class="back-box " v-if="isBack" @click="FnBack">
              <i class="el-icon-arrow-left"></i>
              {{ backName }}
          </div>
          <div class="head-title">
              <slot></slot>
          </div>
          <div class="head-tips">
              <slot name="tips"></slot>
          </div>
      </div>
      <div class="head-right">
          <slot name="right"></slot>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    isBack: { // 是否显示“返回”
        type: Boolean,
        default: false
    },
    isBorder: { // 是否有下边线
        type: Boolean,
        default: false
    },
    backName: {
        type: String,
        default: '返回'
    }
  },
  emits: ['isback'],
  setup(props, {emit}) {
    const FnBack = () => {
      emit('isback')
    }
    return {
      FnBack
    }
  }
}
  
</script>
<style lang="scss" scoped>
.page-head{
    display: flex;
    padding:12px 24px 12px 8px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .head-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .back-box{
        color:#9D9DAD;
        display: flex;
        align-items: center;
        padding-left: 16px;
        padding-right:20px;
        border-right:1px #EBEBF7 solid;
        font-size:14px;
        cursor: pointer;
        .el-icon{
            position: relative;
            top:2px;
            color:#9D9DAD;
            margin-right: 5px;
        }
        svg {
            width:20px;
            height: 20px;
        }
    }
    .head-title{
        color: #2E2E44;
        font-weight:bold;
        font-size:16px;
        margin-left:20px;
        margin-right:12px;
        height:32px;
        line-height: 32px;
        display: flex;
        .svg{
            margin-right:8px;
            .svg-icon{
                width:22px;
                height:22px;
            }
        }
    }
    .head-tips{
        color: #5D5D70;
    }
    &.border{
        border-bottom: 2px #EBEBF7 solid;
    }

}
</style>
